<script setup lang="ts">
import type { PropType } from 'vue'

type btnType = 'cancel' | 'enLarge' | 'reduce'

const props = defineProps({
  btns: {
    type: Array as PropType<btnType[]>,
    default: () => {
      return ['cancel', 'enLarge']
    },
  },
})

const emits = defineEmits(['cancel', 'enLarge', 'reduce'])

function includesBtn(btn: btnType) {
  return props.btns.includes(btn)
}

function cancel() {
  emits('cancel', true)
}

function enLarge() {
  emits('enLarge', true)
}

function reduce() {
  emits('reduce', true)
}
</script>

<template>
  <el-card class="item-card">
    <template #header>
      <div class="item-header">
        <div class="item-left">
          <slot name="headerLeft">
            <span v-if="includesBtn('cancel')" class="red-btn btn" @click="cancel">
              <svg-icon name="cancel" color="#1d2129" size="8px" />
            </span>
            <span v-if="includesBtn('reduce')" class="yellow-btn btn" @click="reduce">
              <svg-icon name="reduce" color="#1d2129" size="8px" />
            </span>
            <span v-if="includesBtn('enLarge')" class="green-btn btn" @click="enLarge">
              <svg-icon name="enLarge" color="#1d2129" size="8px" />
            </span>
          </slot>
        </div>
        <div class="item-right">
          <slot name="headerRight" />
        </div>
      </div>
    </template>

    <!-- body -->
    <slot />
  </el-card>
</template>

<style lang="scss" scoped>
.item-card {
    width: 100%;
    height: 100%;

    .item-header {
        width: 100%;
        height: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .item-left {
            display: inline-flex;
            align-items: center;
            cursor: pointer;

            .btn {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 14px;
                height: 14px;
                margin: 0 4px;
                color: #1d2129;
                font-weight: 700;
                border-radius: 50%;

                .svg-icon {
                    transition: opacity 500ms;
                    opacity: 0;
                }
            }

            &:hover .btn .svg-icon {
                opacity: 1;
            }

            .red-btn {
                background-color: #fc625d;
            }

            .yellow-btn {
                background-color: #fdbd30;
            }

            .green-btn {
                background-color: #34c749;
            }
        }

        .item-right {
            font-weight: 700;
        }
    }
}
</style>

<style lang="scss">
.item-card {
    .el-card__header {
        padding: 10px;
    }
    .el-card__body {
        padding: 10px;
        width: 100%;
        height: calc(100% - 24px);
    }
}
</style>
